<template>
	<view class="container">
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>标题
			</view>
			<input type="text" v-model="titleInput" placeholder="请输入标题" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>类型
			</view>
			<picker mode="selector" :value="selectType" :range="types" @change="bindTypeChange" range-key="tagName" class="picker_class">
				<view class="uni-input">{{selectType?selectType:'请选择类型'}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>内容
			</view>
			<textarea maxlength="140" v-model="contentInput" type="text" placeholder="请输入内容" class="picker_content_class" />
			</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>
				姓名
			</view>
			<input type="text" v-model="reportPerson" placeholder="请输入姓名" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>
				电话
			</view>
			<input type="text" v-model="personPhone" placeholder="请输入号码" class="picker_class" />
		</view>
		<view class="group_item1">
			<view class="group_title1">
				图片
			</view>
			<view>
				<robby-image-upload v-model="imageUrlList" fileKeyName="file" :header="header" :formData="formData"
					:server-url="uploadUrl" :showUploadProgress="true" limit="4"></robby-image-upload>
			</view>
		</view>
		<button type="primary" class="button_class" @click="addSuggestion()">发布</button>
	</view>
</template>

<script>
	import robbyImageUpload from "@/components/robby-image-upload/robby-image-upload";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				communityId:this.$api.util.getAreaCode(),
				titleInput: '',
				contentInput: '',
				selectType: "",
				tagUuid:"",
				reportPerson: '',
				personPhone: '',
				types: [],
				imageUrlList: [],
				header: {},
				formData: {},
				uploadUrl:  this.$api.request.apiBaseUrl+'uploadSingleImage/smartserver/H5'
			}
		},
		onLoad() {
			this.getTagsByType();
			this.getOwnerInfo();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			/**
			 * 获取用户信息
			 */
			getOwnerInfo() {
				let ownerInfo = this.userInfo.ownerInfo
				if(ownerInfo){
					this.reportPerson = ownerInfo.name;
					this.personPhone = ownerInfo.telNo;
				}
			},
			getTagsByType() {
				let params = {
					"areaCode": this.communityId,
					"tagType": "ADVISE"
				}
				this.$api.request.getTagsByType(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.types = res.body.data.list
					}
				})
			},
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			bindTypeChange(e) {
				this.selectType = this.types[e.target.value].tagName
				this.tagUuid = this.types[e.target.value].tagUuid
			},
			addSuggestion() {
				let UserID = this.userInfo.userUuid
				if (this.titleInput == "") {
					uni.showToast({
						title: '请填写标题',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.selectType == "") {
					uni.showToast({
						title: '请选择类型',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.contentInput == "") {
					uni.showToast({
						title: '请填写内容',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.personPhone != "") {
					if (!this.$api.util.validateMobileNo(this.personPhone)) {
						this.$api.msg('请输入正确的手机号码');
						return;
					}
				}

				let params = {
					"title": this.titleInput,
					"content": this.contentInput,
					"userUuid": UserID, //需要根据login修改
					"tagType": "ADVISE",
					"reporter": this.reportPerson,
					"reporterPhone": this.personPhone,
					"tagUuid": this.tagUuid,
					"areaCode": this.communityId,
					"imageUrl": this.imageUrlList,
				}
				this.$api.request.addEvent(params, (res) => {
					console.log(res)
					if (res.body.status.statusCode == 0) {
						uni.showToast({
							title: "发布成功",
						})
						uni.navigateBack({})
					} else {
						uni.showToast({
							title: "发布失败",
						})
					}
				})
			},
		},
		components: {
			robbyImageUpload
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
		height: 100%;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		position: fixed;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}

	.uni-list-cell-pd {
		padding: 22upx 30upx;
		background: white;
	}

	.uni-list-cell {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.uni-list-cell-db {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 30upx;
		font-weight: bold;
	}
</style>
